<template>
  <div id="order-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          :num="`${item.goods_number}${item.goods_unit}`"
          :price="item.retail_price"
          :title="item.name"
          :thumb="item.list_pic_url"
          v-for="(item,index) in goodsArr" :key="index"
          @click="onClickGoods(item.id)"
        />
      </van-list>
    </van-pull-refresh>
    
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #order-list{
    width: 100%;
    height: 100%;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { 
  Image as VanImage,PullRefresh,List,Card,Tab,Tabs,Cell,Button,Divider
} from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';
import goodsApi from '../api/goods.api';

Vue.use(VanImage).use(PullRefresh).use(List).use(Card).use(Tab).use(Tabs).use(Cell).use(Button).use(Divider);
@Component
export default class GoodsListComponent extends Vue {
  private goodsData: any={};
  private goodsArr: any[]=[];
  private finished: boolean=false;
  private loading: boolean=false;
  private refreshing: boolean=false;
  
  async created(){
    store.commit('global/setShowPageLoading',true);
    this.goodsData=await goodsApi.getGoods();
    this.goodsArr=this.goodsData.data;
    store.commit('global/setShowPageLoading',false);
  }

  private async onRefresh(){
    // 清空列表数据
    this.finished = false;
    this.loading=true;
    this.goodsData=await goodsApi.getGoods();
    this.goodsArr=this.goodsData.data;
    this.loading=false;
  }

  private async onLoad(){
    const p=this.goodsData.page+1;
    if(p>this.goodsData.pageCount){
      this.finished=true;
      return;
    }
    this.loading=true;
    this.goodsData=await goodsApi.getGoods({
      page: p
    });
    this.goodsArr=this.goodsArr.concat(this.goodsData.data);
    this.loading=false;
  }
  
  private onClickGoods(id){
    router.push({
      path:`/goodDetail/${id}`
    })
  }

}
</script>
